import React, { useEffect } from 'react';
import { append } from '../utils';

function main() {
  const arr = [100, 200, 300, 400];

  // eslint-disable-next-line no-restricted-syntax
  for (const item of arr) {
    append(item);
    // 使用 break 关键字可以跳出循环 for in 循环不可
  }

  const s = new Set(['foo', 'bar']);
  // eslint-disable-next-line no-restricted-syntax
  for (const item of s) {
    append(item);
  }

  const m = new Map();
  m.set('foo', '123');
  m.set('bar', '456');

  // eslint-disable-next-line no-restricted-syntax
  for (const [key, value] of m) {
    append(`${key}: ${value}`);
  }

  const obj = {
    foo: '123',
    bar: '456',
  };
  // eslint-disable-next-line no-restricted-syntax
  for (const item of obj) { // Invalid attempt to iterate non-iterable instance.
    append(item);
  }
}

export default function IteratorDemo() {
  useEffect(main, null);

  return (
    <div id="content">
      <p>iterator</p>
    </div>
  );
}
